<template>
  <div class="record-top">
      <h4 style="font-size:17.8px;font-weight: 700;color: rgb(50, 50, 50);margin: 0 0 45px;">
         查询信息
      </h4>
      <div class="record-input-1 record-input">
         <span class="input-1 span" style="width: 228px;margin-right: 56px;">
            <span>停车位</span>
            <input type="text" placeholder="请输入...">
         </span>
         <span class="input-2 span" style="width: 206px;margin-right:97px">
            <span>车牌号</span>
            <input type="text" placeholder="请输入...">
         </span>
         <span class="input-3 span" style="width: 392px;">
            <span>入场时间</span>
            <input type="datetime-local" style="font-size:10px" v-model="intime">
            <span style="margin:0 -5px 0;display:inline-block">至</span>
            <input type="datetime-local" style="font-size:10px" v-model="outtime">
         </span>
      </div>
      <div class="record-input-2 record-input">
         <span class="input-4 span" style="width: 228px;margin-right: 56px;">
            <span>收费员编号</span>
            <input type="text" placeholder="请输入...">
         </span>
         <span class="input-5 span" 
         style="width: 206px;margin-right:97px">
            <span>收费员</span>
            <input type="text" placeholder="请输入...">
         </span>
         <span class="input-6 span" style="width: 218px;">
            <span>路段编号</span>
            <input type="text" placeholder="请输入...">
         </span>
         <button style="background-color:#6768fe;margin-left:26px" @click="checkData">
            查 询</button>
         <button style="background-color:#a8a8a8;margin-left:20px">重 置</button>
      </div>
      <div class="record-input-3 record-input">
         <span class="input-7 span">
            <span>路段地址</span>
            <input type="text" placeholder="请输入..." style="width:700px;margin-left:31px">
         </span>
      </div>
   </div>
</template>

<script>
export default {
   data(){
      return{
         intime:'',
         outtime:''
      }
   },
   methods:{
      checkData(){
         // 将特定时间转为时间戳，对时间戳进行比对，选择符合条件的数据
         console.log('入场时间',Date.parse(this.intime));
         console.log('入场时间',Date.parse(this.outtime));
      }
   }
}
</script>

<style lang="less" scoped>
   .record-top{
      width: 100%;
      height: 297px;
      background-color: #fff;
      border-radius: 4px;
      margin: 0 0 24px;
      padding: 10px 0 0 6px;
   }
   input{
      width: 123px;
      height: 26px;
      padding: 0 0 0 7px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 1.5px 2px 1px #c3c1cc;
      font-size: 16px;
      font-family: '微软雅黑';
      line-height: 26px;
   }
   .record-input{
      font-size: 17px;
      margin: 0 0 44px 99px;
      display: flex;
      color: rgb(56, 56, 56);
   }
   .span{
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   button{
      width: 100px;
      height: 27px;
      border-radius: 4px;
      font-size: 15px;
      text-align: center;
      line-height: 25px;
      color: #fff;
      border: 1px solid #fff;
      box-shadow: 0 1.5px 2px 1px #c3c1cc;
      cursor: pointer;
      font-family: '微软雅黑';
   }
   input::-webkit-input-placeholder{
      color:#868686;
      font-size: 12px;
      transform: translate(0,-5%);
   }
   input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:#868686;
      font-size: 12px;
   }
   input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:#868686;
      font-size: 12px;
   }
   input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
      color:#868686;
      font-size: 12px;
   }
</style>